<template>
   <div class="incomePay-container">
    <el-card>
      <el-row type="flex" justify="center">
        <div style="font-size:25px" class="title-box">{{monthtime}}月份收入和支出详情展示</div>
      </el-row>
      <el-row type="flex" justify="space-between" >
                   <!-- 日期时间选择器开始 -->
              <div>
                    <el-select
                      v-model="timevalue"
                      size="small"
                      style="width: 120px;margin-left:10px"
                      @change="changeDay"
                    >                
              <el-option v-for="item in days" :key="item" :label="item" :value="item" />
      </el-select>
                  <!-- 日期选择器结束 -->
                   <el-button class="screen" type="primary" size="small" @click="reset">重置</el-button>
              </div>
      </el-row>
       <el-table 
       :data="incomePaylist" 
       header-align='center' 
       :stripe="true" 
       show-summary 
       sum-text='合计' 
       :row-class-name="tableRowClassName"
       :header-cell-style="{'text-align':'center','background-color':'lightpink','color':'#fff','height': '50px'}" 
       >
         <el-table-column prop="timeleave" label="日期(日)" align='center'>
           <template slot-scope="{row}">
             {{ row.timeleave | dataF(monthtime) }}
           </template>
         </el-table-column>
         <el-table-column prop="income" label="总收入" align='center' ></el-table-column>
         <el-table-column prop="payment" label="总支出" align='center'></el-table-column>
         <el-table-column label="操作" align='center'>
         <template slot-scope="{ row }"
         >
           <el-button type="primary" size="mini" @click="$router.push(`/incomePay/timeday/${row.timeleave}`)">查看详情</el-button>
         </template>
         </el-table-column>
       </el-table>
         <el-row type="flex" justify="center" align="middle" style="height:60px">
          <el-pagination
          layout="prev, pager, next,sizes"
          :page-size="page.limit"
          :total="page.total"
          :current-page="page.page"
          @current-change='pageChange'
          @size-change="handleSizeChange"
          :page-sizes="[5, 8, 10]"
          background
          />
        </el-row>
     </el-card>
   </div>
</template>
<script>
import { getIncomePayList } from '@/api/incomePay'
export default {
  components:{},
created(){
   this.getIncomePayList()
   this.getDay()
  },
  data(){
    return {
      list:[],
      incomePaylist:[], //收入支出情况的列表
       page: {
        page: 1, // 当前页码
        limit: 10, // 每一页的数据多少
        total: 0 // 总数，默认为零
      },
      timevalue:'',
      editShow:false, //控制弹出层的显示
      editId:0,
      monthtime:this.$route.params.id,
      days:''
    }
  },
  filters: {
    dataF (val, monthtime){
      return `${new Date(monthtime).getMonth() + 1}月${val}日`
    }
  },
  computed:{
  
  },
  methods:{
    // 按照关键字排序
    setArray (c) {
      c.sort(this.compare('timeleave'));
      return c;
    },
    compare (property) {
      return function (a, b) {
        return b[property] - a[property];
      }
    },
    // 获取收入列表的接口
    async getIncomePayList(){ 
      const data = await getIncomePayList({_sort:"timeleave",_order:"asc"})     
      // console.log(data);
      // console.log((new Date(this.monthtime)).getMonth()+1);
      let list=[]
      let dataList=[]
      let day=[]
      data.forEach(item=>{
          // console.log(date);
          // if((new Date(item.timeleave).getMonth()+1)===((new Date(this.monthtime)).getMonth()+1)){
          //    list.push(item)
          // }
          // 先是判断出点击是哪一个月份，然后赋值给自己定义的一个空数组
        list=data.filter(item=>(new Date(item.timeleave).getMonth())===((new Date(this.monthtime)).getMonth()))
        // 去循环这个月份的数组，然后拿到这个月份里面所有的日期
        list.forEach(item=>{
          //  day.push(`${(new Date(this.monthtime)).getMonth()}月${(new Date(item.timeleave).getDate())}日`)
          day.push((new Date(item.timeleave).getDate()))
         })
      });
      // console.log(day)
      // 将这个月份里面所有的重复日期去重
      day=Array.from(new Set(day));
      
        for(let i=0;i<day.length;i++){
        //  将数据初始化后添加到一个新的数组里面
             dataList.push({income:0,payment:0,timeleave:day[i]})
            //  console.log(day[i]);
        }
        // 筛选出每个月中一样的日期，将收入和支出相加
        list.forEach(item=>{
            dataList.forEach(test=>{
             if((new Date(item.timeleave).getDate())===test.timeleave){
               test.income+=item.income
               test.payment+=item.payment
           }
           })
        })
      // console.log(dataList);
      // console.log("list",list);
      localStorage.setItem('list',JSON.stringify(list))
      this.list=dataList
      const current=this.page.page
      const limit= this.page.limit
      let showList=[]
      this.page.total=dataList.length                     
      showList = this.setArray(showList)
      for(let i=(current-1)*limit;i<current*limit&&i<this.page.total;i++){
        showList.push(dataList[i])
      }
      this.incomePaylist=showList
    },
    changeDay(){
      this.page.total=1
      this.page.page=1
      this.incomePaylist=this.list.filter(item=>item.timeleave===this.timevalue)
    },
    // 获取每一个月的天数
    getDay(){
    const timeArray=this.monthtime.split('-')
     this.days = this.getMonthDay(parseInt(timeArray[0]),parseInt(timeArray[1]))
    },
    getMonthDay(year, month) {
    let days = new Date(year, month, 0).getDate()
    return days
  },
  pageChange(page){
    // console.log(123,page);
    this.page.page=page
    this.getIncomePayList()
  },
  handleSizeChange(page){
    // console.log(456,page);
    this.page.limit=page
    this.getIncomePayList()
  },
    /* 
      表格隔行变色  
    */
    tableRowClassName ({ row, rowIndex }) {
      return rowIndex % 2 == 0 ? 'warning-row' : 'success-row'
    },
    reset(){
      this.timevalue=''
      this.getIncomePayList()
    }
  },
}
</script>

<style>
.incomePay-container{
  padding: 20px;
}
.screen{
  margin:20px
}
/* 隔行变色 */
/* -------------------------------- 表格隔行变色 */
.el-table .warning-row {
  background: oldlace !important;
}
.el-table .success-row {
  background: #e7e7e7 !important;
}

</style>

